本文共 12192 字，大约阅读时间需要 40 分钟。
react leaflet
Building maps can be pretty powerful, but often you’re stuck with open source options for the map imagery that might not help the readability of your data. How can we leverage Mapbox’s tile APIs to add a custom basemap to our React Leaflet app?
构建地图的功能可能非常强大，但是您经常会为地图图像使用开放源代码选项，这可能不利于数据的可读性。 我们如何利用Mapbox的tile API向我们的React Leaflet应用添加自定义底图？
We’re going to walk through creating a new basic in our account. Once created, we’re going to use their to add a custom basemap to our app.
我们将在帐户中创建新的基本 。 创建完成后，我们将使用其向我们的应用添加自定义底图。
For our map, we’re going to use this I created that will allow you to easily spin up a new mapping app. Before we spin that up though, I’ll walk you through how to add it using only React Leaflet components.
对于我们的地图，我们将使用我创建的 ，它将使您轻松启动新的地图绘制应用程序。 在开始之前，我将引导您如何仅使用React Leaflet组件添加它。
Yup! Maps are used all around the world to study datasets for geographic locations. They're important tools for scientists and others that are trying to help the world.
对！ 世界各地都使用地图来研究地理位置数据集。 对于科学家和其他试图帮助世界的人来说，它们是重要的工具。
If you want to learn more about building a map and adding data to it, you can check out some of first such as creating a or a as well as a little bit of inspiration about why .
如果您想了解有关构建地图和向其中添加数据的更多信息，可以先阅读例如创建或“ ，以及一些其他内容。关于为什么启示。
Mapbox is a mapping platform that allows its customers to create custom mapping solutions. They also leverage a variety of APIs that provide powerful capabilities for building map features.
Mapbox是一个映射平台，可让其客户创建自定义映射解决方案。 他们还利用各种API提供强大的功能来构建地图功能。
For our purposes, we’re going to utilize their Map API, specifically their Static Tiles API, to serve a custom map style that we create.
为了我们的目的，我们将利用他们的Map API，特别是他们的Static Tiles API，来提供我们创建的自定义地图样式。
To get the look and feel that we want for our map, it’s important to have a basemap that helps make our data present itself without distractions. Plus, sometimes it’s fun to have a custom map.
为了获得我们想要的地图外观，感觉很重要，要有一个底图，它可以使我们的数据呈现出来而不会分散注意力。 另外，有时自定义地图会很有趣。
The first thing we’ll need to set up our custom Mapbox style is to have an account. I'm not going to walk you through that process, but you can head over to where you can sign up for free:
设置自定义Mapbox样式的第一件事是拥有一个帐户。 我不会逐步介绍该过程，但是您可以转到 ，免费注册：
Creating a new style in Mapbox isn’t as hard as it sounds. While it can get really complex if you want something unique, we can copy one of Mapbox’s default styles to get started.
在Mapbox中创建新样式并不像听起来那样困难。 如果您想要独特的东西，它可能会变得非常复杂，但是我们可以复制Mapbox的默认样式之一来开始使用。
First, head over to Mapbox’s by clicking your account link in the top right corner when logged in.
首先，请在登录后单击右上角的帐户链接转到Mapbox的 。
Once we’re on our Studio dashboard, we want to select the New Style button.
在Studio仪表板上后，我们要选择“新样式”按钮。
After clicking the button, a modal will pop up allowing you to choose a template. You can choose whatever you want here, but I’m going to choose Monochrome with a variation of Dark. And after you’ve selected your template, click the Customize button.
单击按钮后，将弹出一个模态，允许您选择模板。 您可以在此处选择任何内容，但我将选择带有Dark变体的Monochrome。 然后，选择模板后，单击“自定义”按钮。
And now we’re dropped into our customization UI.
现在，我们进入了自定义界面。
From here, you can really do what you’d like. There are a ton of options to customize your map. It’s a little complex to try to dig in here, but to try to help you get productive.
在这里，您可以真正完成自己想做的事情。 有很多选项可以自定义地图。 尝试在这里进行挖掘有点复杂，但是来帮助您提高工作效率。
Once you’re happy with your new style and everything’s published, we want to generate a token that we’ll use for providing access to our Map.
当您对新样式满意并发布了所有内容后，我们想生成一个令牌，该令牌将用于提供对地图的访问权限。
Head on over to the Account section of the Mapbox dashboard.
转到Mapbox仪表板的Account部分。
Mapbox provides you with a “default” token that you can use in your applications. You're free to use this, but I recommend creating a new token that you can provide a unique name, that way if you ever blow past the of Mapbox, you’ll be able to track your usage.
Mapbox为您提供了一个“默认”令牌，您可以在应用程序中使用它。 您可以随意使用它，但是我建议您创建一个新令牌，以提供唯一的名称，这样，如果您超过了Mapbox的 ，就可以跟踪您的用法。
Additionally, it’s best to keep a separate token for each application, that way you can easily rotate an individual key, without having to update every application using it.
此外，最好为每个应用程序保留一个单独的令牌，这样您就可以轻松旋转单个密钥，而不必使用它来更新每个应用程序。
Once you click Create a token, you can set up the key how you’d like, with the scopes and permissions you choose, but for our purposes, you can leave all of the Public scopes checked for our map, which they do by default.
单击创建令牌后，您可以使用自己选择的范围和权限来设置所需的键，但是出于我们的目的，您可以选中地图的所有公共范围，默认情况下会选中。
For this tutorial, we’re going to use .
在本教程中，我们将使用 。
Our endpoint will look like the following:
我们的端点将如下所示：
https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token} There are a few parameters here we need to understand:
这里需要了解一些参数：
To find your username and style ID, we can use the Style URL for our new Mapbox style to get those values.
要找到您的用户名和样式ID，我们可以使用新Mapbox样式的样式URL来获取这些值。
In my example, my Style URL looks like:
在我的示例中，我的样式网址如下所示：
mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p
colbyfayock is my username and ck8lryjfq0jdo1ip9ctmuhc6p is my style ID.
colbyfayock是我的用户名， ck8lryjfq0jdo1ip9ctmuhc6p是我的样式ID。
And once I update my endpoint parameters, the final tilepoint URL will look like:
更新端点参数后，最终的tilepoint URL将如下所示：
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN When building a map with React Leaflet, your main component will be a <Map> that wraps the entirety of the app. This is what sets up your for .
当使用React Leaflet构建地图时，您的主要组件将是<Map> ，它包装了整个应用程序。 这就是为设置的过程。
For our purposes here, we’re going to use the example on the as our starting point.
为了达到这里的目的，我们将以上的示例为起点。
Inside of your <Map> component you include a <TileLayer> component, which defines the imagery of the world that you base your map upon.
在<Map>组件内部，包含一个<TileLayer>组件，该组件定义了地图所基于的世界的图像。
The example on the React Leaflet homepage uses a public version of as their TileLayer, which is an open source map project created and updated by people all around the world.
React Leaflet主页上的示例使用的公共版本作为TileLayer，这是一个由世界各地的人们创建和更新的开源地图项目。
This gives you a basic map, but we want to swap in Mapbox so we can set up a custom look and feel for our map.
这为您提供了基本的地图，但是我们希望在Mapbox中进行交换，以便我们可以为地图设置自定义外观。
To add our custom style, we’ll want to update the url and attribution props of the TileLayer component.
要添加我们的自定义样式，我们将要更新TileLayer组件的url和attribution 。
For URL, it will simply be the custom style endpoint we created earlier, so in my example, it looks like:
对于URL，它只是我们之前创建的自定义样式终结点，因此在我的示例中，它看起来像：
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN For attribution, we want to credit Mapbox as the service, so we want to set our attribution as:
对于归因，我们希望将Mapbox归功于服务，因此我们希望将归因设置为：
Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox
When plugged in to our TileLayer, our code should now look like this:
当插入我们的TileLayer ，我们的代码现在应如下所示：
And once we open up our map, we should see our new basemap!
打开地图后，我们应该会看到新的底图！
If you want to see how I did it, .
如果您想了解我是如何做到的， 。
The only caveat there is I created an .env.development.local file in the root of my project in which I stored a new environment variable called REACT_APP_MAPBOX_KEY to store my Mapbox key.
唯一需要注意的是，我在项目的根目录中创建了一个.env.development.local文件，在其中存储了一个名为REACT_APP_MAPBOX_KEY的新环境变量来存储我的Mapbox密钥。
I’ve written on with my , but for this part, we’ll want to have a basic app spun up that we can use to change our TileLayer endpoint.
我还写 ， 使用 ，但是对于这一部分，我们希望启动一个基本应用程序，以用于更改TileLayer端点。
To get started, check out the instructions on the Starter github:
首先，请查看Starter github上的说明：
Once you’re ready, you should have a basic mapping app ready to go!
准备就绪后，您应该已经准备好使用基本的地图绘制应用程序！
The first thing we’ll want to do is add Mapbox as a service in our src/data/map-services.js file.
我们要做的第一件事是在我们的src/data/map-services.js文件中将Mapbox添加为src/data/map-services.js 。
Taking our custom endpoint URL that we created in Part 1, let’s set up a new object with a name of Mapbox, and with a url and attribution similar to what we did in Part 2.
使用我们在第1部分中创建的自定义端点URL，让我们设置一个新对象，其名称为Mapbox，并具有与第2部分中相似的url和属性。
export const mapServices = [ { name: ‘OpenStreetMap’, attribution: '© Once you have your Mapbox service set up, all that’s left is to open up the src/pages/index.js file, find the mapSettings object definition, and update the defaultBaseMap property to Mapbox.
设置好Mapbox服务后，剩下的就是打开src/pages/index.js文件，找到mapSettings对象定义，并将defaultBaseMap属性更新为Mapbox 。
const mapSettings = { center: CENTER, defaultBaseMap: ‘Mapbox’, zoom: DEFAULT_ZOOM, mapEffect}; Save that change, refresh the map in your browser, and you should now see your custom basemap style!
保存所做的更改，在浏览器中刷新地图，您现在应该可以看到自定义底图样式！
If you want to see how I did it, .
如果您想了解我的操作方法， 。
The only caveat there is I created an .env.development file in the root of my project in which I stored a new environment variable called GATSBY_MAPBOX_KEY to store my Mapbox key.
唯一需要注意的是，我在项目的根目录中创建了一个.env.development文件，在其中存储了一个名为GATSBY_MAPBOX_KEY的新环境变量来存储我的Mapbox密钥。
Part of most development processes that use individual keys will generally set the keys up as environment variables. Environment variables are configured settings that don’t live in the code itself.
大多数使用单个键的开发过程的一部分通常会将键设置为环境变量。 环境变量是配置的设置，它们不存在于代码本身中。
This is important because it prevents your key from being checked in to your code, which is bad from a security perspective, but it also allows you to provide a different key for different environments.
这很重要，因为它可以防止将密钥签入代码，这从安全角度来看是很糟糕的，但是它还允许您为不同的环境提供不同的密钥。
When generating your keys, try to keep this in mind, as it can save you in the long run.
生成密钥时，请记住这一点，因为从长远来看，它可以节省您的时间。
In your settings when creating a token or when editing a token, Mapbox allows you to specify only the URLs you want your key to be accessible from.
在创建令牌或编辑令牌时的设置中，Mapbox允许您仅指定希望从中访问密钥的URL。
Though Mapbox has a generous free tier, you probably want to keep it locked down only to the URLs that you’re using it on. You can create multiple keys, where one could be for public use on your website and one would be for your local development.
尽管Mapbox具有免费的免费层，但您可能希望仅将其锁定在使用它的URL上。 您可以创建多个密钥，其中一个可以在您的网站上公开使用，另一个可以用于您的本地开发。
This is helpful for instance, where you have a key that will never be used publicly for development purposes, but then you have a key that you deploy with, which can be locked down only to that URL.
例如，这对您很有用，您拥有一个永远不会公开用于开发目的的密钥，但是您拥有一个用于部署的密钥，该密钥只能锁定到该URL。
If someone grabs your key, they could plug it into their own website and use up all of your free tier, potentially running up your bill!
如果有人抓住了您的钥匙，他们可以将其插入自己的网站并用尽您的所有免费套餐，从而有可能增加您的账单！
You can check out a few of my other resources to get started:
您可以查看其他一些资源以开始使用：
翻译自:
react leaflet
转载地址：http://yjhwd.baihongyu.com/